<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>抚乐酒吧</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .app-bgImg-main {
            height: calc(100% - 64px);
        }

        .app-bgImg-main .divTmp {
            width: 100%;
            height: 100%;
        }

        .home-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 999;
        }
    </style>
</head>

<body>
<div class="app-bgImg" id="app-bgImg">
    <el-button type="primary" class="home-button" @click="goToHome" v-show="showHomeButton">返回首页</el-button>
    <el-carousel :interval="10000" height="100vh">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <img :src="item.url" style="width:100%;height:100%;object-fit:cover;">
        </el-carousel-item>
    </el-carousel>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/manage.js"></script>
<script>
    new Vue({
        el: '#app-bgImg',
        data() {
            return {
                carouselItems: [],
                showHomeButton: true,
                mouseTimer: null
            }
        },
        created() {
            this.initImage();
        },
        mounted() {
            this.setupMouseListeners();
        },
        methods: {
            setupMouseListeners() {
                document.addEventListener('mousemove', () => {
                    this.showHomeButton = true;
                    if (this.mouseTimer) {
                        clearTimeout(this.mouseTimer);
                    }
                    this.mouseTimer = setTimeout(() => {
                        this.showHomeButton = false;
                    }, 3000);
                });
            },
            goToHome() {
                window.location.href = '../index.html';
            },
            initImage() {
                getImageList().then(res => {
                    res = res.data;
                    if (res.code === 1) {
                        this.carouselItems = res.data.map(item => {
                            return {
                                id: item.id,
                                url: this.getImage(item.image)
                            }
                        });

                    }
                })
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
        }
    })
</script>
</body>
</html>
